<template>
  <el-drawer
    :model-value="checkDialog"
    @close="$emit('assign-dialog')"
    size="80%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <template #header>
      <div class="header">
        <div class="text">工单费用详情</div>
      </div>
    </template>
    <h4 class="title_top">基本信息</h4>
    <div class="table-detail" v-loading="loading" element-loading-text="加载中...">
      <div class="basic_info" v-if="detailData">
        <div class="info_item">
          <div class="label">申请编码:</div>
          <div class="value">{{ detailData.feeNo }}</div>
        </div>
        <div class="info_item">
          <div class="label">关联工单:</div>
          <div class="vlaue">{{ detailData.workNo }}</div>
        </div>
        <div class="info_item">
          <div class="label">费用状态:</div>
          <div class="value">
            <HStatus type="warning" v-if="detailData.status == 1">待审核</HStatus>
            <HStatus type="success" v-if="detailData.status == 2">已通过</HStatus>
            <HStatus type="error" v-if="detailData.status == 3">已驳回</HStatus>
            <HStatus type="info" v-if="detailData.status == 4">已撒回</HStatus>
            <HStatus type="info" v-if="detailData.status == 5">已取消</HStatus>
          </div>
        </div>
        <div class="info_item">
          <div class="label">结算类型:</div>
          <div class="label">{{ detailData.settlementType }}</div>
        </div>
        <div class="info_item">
          <div class="label">申请人员:</div>
          <div class="value">{{ detailData.applyEmp }}</div>
        </div>
        <div class="info_item">
          <div class="label">申请时间:</div>
          <div class="value">{{ detailData.createTime }}</div>
        </div>
        <div class="info_item">
          <div class="label">审批时间:</div>
          <div class="value">{{ detailData.reviewTime }}</div>
        </div>
        <div class="info_item">
          <div class="label">审批人员:</div>
          <div class="value">{{ detailData.reviewEmp }}</div>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" class="table-detail" @tab-change="handleClick">
      <!-- 费用项目 -->
      <el-tab-pane label="费用项目" name="first">
        <el-table
          :border="true"
          stripe
          resizable
          max-height="350px"
          :data="feeDetails"
          v-loading="getOrderFeeDetailProjectLoading"
        >
          <template #empty>
            <el-empty description="暂无数据" :image-size="60" />
          </template>

          <!-- 序号 -->
          <el-table-column show-overflow-tooltip label="序号" fixed="left" min-width="50">
            <template v-slot="i">
              {{ i.$index + 1 }}
            </template>
          </el-table-column>

          <!-- 审核状态 -->
          <el-table-column show-overflow-tooltip prop="name" label="审核状态" width="90">
            <template v-slot="scope">
              <HStatus type="warning" v-if="scope.row.status == 1">待审核</HStatus>
              <HStatus type="success" v-if="scope.row.status == 2">已通过</HStatus>
              <HStatus type="error" v-if="scope.row.status == 3">已驳回</HStatus>
              <HStatus type="info" v-if="scope.row.status == 4">已撒回</HStatus>
              <HStatus type="info" v-if="scope.row.status == 5">已取消</HStatus>
            </template>
          </el-table-column>

          <!--收支类型-->
          <el-table-column label="收支类型" prop="date" show-overflow-tooltip width="100">
            <template #default="scope">
              <span v-if="scope.row.type === 1">商家承担</span>
              <span v-else>平台承担</span>
            </template>
          </el-table-column>

          <!-- 费用项目 -->
          <el-table-column show-overflow-tooltip prop="name" label="费用项目" width="100" />

          <!-- 数量 -->
          <el-table-column show-overflow-tooltip prop="qty" label="数量" width="80" />

          <!--平台承担费用-->
          <el-table-column
            align="center"
            label="平台承担费用"
            prop="price"
            show-overflow-tooltip
            width="120"
          >
            <template #default="scope"> ￥{{ scope.row.price.toFixed(2) }} </template>
          </el-table-column>

          <!--向服务商支付费用-->
          <el-table-column
            align="center"
            label="向服务商支付费用"
            prop="payNetworkPrice"
            show-overflow-tooltip
            width="140"
          >
            <template #default="scope"> ￥{{ scope.row.payNetworkPrice.toFixed(2) }} </template>
          </el-table-column>

          <!--收取商家费用-->
          <el-table-column
            align="center"
            label="收取商家费用"
            prop="receiveFactoryPrice"
            show-overflow-tooltip
            width="140"
          >
            <template #default="scope"> ￥{{ scope.row.receiveFactoryPrice.toFixed(2) }} </template>
          </el-table-column>

          <!-- 备注 -->
          <el-table-column show-overflow-tooltip prop="city" label="备注" width="170" />

          <!-- 附件 -->
          <el-table-column prop="city" label="附件" width="460">
            <template v-slot="scope">
              <div style="display: flex; align-items: center; gap: 8px">
                <div v-for="(img, imgIndex) in scope.row.images" :key="img.id">
                  <el-image
                    style="width: 40px; height: 40px"
                    :src="img.image"
                    :preview-src-list="scope.row.images.map((item) => item.image)"
                    :initial-index="imgIndex"
                    fit="contain"
                    :max-scale="15"
                    preview-teleported
                  />
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 操作日志 -->
      <el-tab-pane label="操作日志" name="third">
        <div>
          <el-table :border="true" stripe resizable max-height="350px" :data="detailDataLog">
            <template #empty>
              <el-empty description="暂无数据" :image-size="60" />
            </template>
            <el-table-column
              show-overflow-tooltip
              label="序号"
              fixed="left"
              width="50"
              align="center"
            >
              <template v-slot="i">
                {{ i.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="state" label="操作人" width="140">
              <template v-slot="i">
                {{ i.row.createEmpType + '-' + i.row.createEmp }}
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="event" label="操作事件" width="240" />
            <el-table-column show-overflow-tooltip prop="content" label="备注" width="220" />
            <el-table-column prop="createTime" label="时间" width="120" />
          </el-table>
          <div class="pagination">
            <Pagination
              ref="pagination"
              :list_total="totalList"
              @size-change="getOrderFeeLogListData()"
              @current-change="getOrderFeeLogListData()"
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <HButton isModal @click="$emit('assign-dialog')">关闭</HButton>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
  import { ref, toRefs, watch } from 'vue'
  import { getOrderFeeDetail, getOrderFeeLogList, OrderFeeDetailProjectInfo } from '@/api/order'
  import Pagination from '@/components/Pagination/index.vue'
  import { ElMessage } from 'element-plus'
  import { ServiceFeeDetail, ServiceFeeDetailProject } from './types'
  import HButton from '@/components/common/button/HButton.vue'
  import HStatus from '@/components/common/status/HStatus.vue'

  const props = defineProps({
    checkDialog: Boolean,
    feeId: String,
    workNo: String,
    feeNo: String,
  })

  const emits = defineEmits<{
    (e: 'assign-dialog'): void
    (e: 'update-list'): void
  }>()

  const { checkDialog, feeId } = toRefs(props)
  const loading = ref(false)

  // 服务费用详情
  const detailData = ref<ServiceFeeDetail | null>(null)
  const detailDataLog = ref(null)
  const activeName = ref('first')

  // 服务费用项目
  const feeDetails = ref<Array<ServiceFeeDetailProject>>([])

  const totalList = ref(0)

  // 操作日志分页组件实例
  const pagination = ref<InstanceType<typeof Pagination> | null>(null)

  /**
   * 根据服务项目ID获取服务项目详情
   * @param {string} id 服务项目ID
   */
  const getOrderFeeDetailProjectInfo = async (id: string) => {
    loading.value = true
    const res = await getOrderFeeDetail(id)
    if (res.data.success) {
      detailData.value = res.data.data.row
    } else {
      if (res.data.isError)
        ElMessage({
          showClose: true,
          message: res.data.message,
          duration: 4000,
          offset: 200,
          type: 'error',
        })
    }
    loading.value = false
  }

  /**
   * 获取操作日志详情
   */
  const getOrderFeeLogListData = async () => {
    loading.value = true
    let data = {
      limit: 50,
      page: 1,
    }
    if (pagination.value) {
      data.limit = pagination.value.size
      data.page = pagination.value.current
    }
    const res = await getOrderFeeLogList(data, feeId.value)
    if (res.data.success) {
      detailDataLog.value = res.data.data.rows
      totalList.value = Number(res.data.data.total)
    } else {
      if (res.data.isError)
        ElMessage({
          showClose: true,
          message: res.data.message,
          duration: 4000,
          offset: 200,
          type: 'error',
        })
    }
    loading.value = false
  }

  // 根据服务项目ID获取项目信息列表加载
  const getOrderFeeDetailProjectLoading = ref(false)

  /**
   * 根据服务项目ID获取项目信息列表
   * @param {string} id 服务项目ID
   */
  const getOrderFeeDetailProject = async (id: string) => {
    getOrderFeeDetailProjectLoading.value = true
    const res = await OrderFeeDetailProjectInfo(id)
    getOrderFeeDetailProjectLoading.value = false
    if (res.data.success) {
      feeDetails.value = res.data.data.row
    } else {
      if (res.data.isError)
        ElMessage({
          showClose: true,
          message: res.data.message,
          duration: 4000,
          offset: 200,
          type: 'error',
        })
    }
  }

  /**
   * tab标签改变事件
   * @param {string} val 标签名
   */
  const handleClick = (val: string) => {
    switch (val) {
      case 'first':
        getOrderFeeDetailProject(feeId.value)
        break
      case 'second':
        break
      case 'third':
        getOrderFeeLogListData()
        break
    }
  }

  watch(
    props,
    async (value) => {
      if (value.checkDialog && value.feeId) {
        await getOrderFeeDetailProjectInfo(value.feeId)
        await getOrderFeeDetailProject(value.feeId)
      }
    },
    { immediate: true },
  )
</script>

<style lang="scss" scoped>
  .header {
    .text {
      font-size: 16px;
      color: #000;
    }
  }

  .title_top {
    border-left: 2px solid #007cff;
    line-height: 14px;
    padding-left: 6px;
    margin-bottom: 8px;
  }

  .basic_info {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 6px;

    .info_item {
      display: flex;
      gap: 5px;
      align-items: center;

      .label {
        color: $formLabelColor;
      }
    }
  }

  .pagination {
    margin-top: 8px;
  }

  .footer_btn {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-right: 8px;
  }

  .disf_ipc {
    display: flex;

    p {
      width: 40px;
      height: 40px;
      margin-right: 6px;
      border: 1px solid #7f7f7f27;
      border-radius: 2px;
      box-sizing: border-box;

      .img {
        width: 100%;
        border-radius: 2px;
        cursor: pointer;
      }
    }
  }

  .coloe {
    margin-top: 10px;
    text-align: right;
  }

  .pagination {
    height: 42px;
    display: flex;
    justify-content: flex-end;
  }

  @import '../index.scss';
</style>
